<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%', 'margin-bottom': '68px' }">
      <div class="name-bar">
        <span class="name-content">{{ info.name || '-' }}</span>
        <span>
          <span><a-icon type="info-circle" theme="filled" style="color: #bfbfbf; margin-right: 4px" /></span>
          <span style="color: #666">保存后即时生效，但不会改变以往已生成的结算记录。</span>
        </span>
      </div>
      <div class="set-fixed-salary">
        <div class="title">
          <span style="color: #333; font-weight: 500; margin-right: 8px">固定工资设置</span>
          <span style="color: #999">单位:元</span>
        </div>
        <!-- <div class="set-item-btn">
          <a-icon type="setting" style="margin-right: 4px" />
          <span>设置工资条项目</span>
        </div> -->
        <div class="salary-list">
          <div class="item">
            <div class="title">基本工资</div>
            <div class="num">
              <a-input v-model="info.base_pay" />
            </div>
          </div>
          <div class="item">
            <div class="title">奖金</div>
            <div class="num">
              <a-input v-model="info.bonus" />
            </div>
          </div>
          <template v-if="info.payslip_item_arr && info.payslip_item_arr.length > 0">
            <div class="item" v-for="(item, index) in info.payslip_item_arr" :key="index">
              <div class="title">{{ item.name }}</div>
              <div class="num" v-if="item.type==2">
                <div class="fu-box t-relative t-flex t-flex-ac">
                   <span class="fu-icon">-</span>
                   <a-input v-model="item.value" @change="$forceUpdate()"/>
                </div>
              </div>
              <div class="num" v-else>
                <a-input v-model="item.value" @change="$forceUpdate()"/>
              </div>
            </div>
          </template>
        </div>
      </div>

      <template v-if="is_enable != 2">
        <div class="performance-pay-setting">
          <div class="title">上课绩效工资设置</div>
          <div class="content">
            <div class="content-item">
              <span class="label">结算方式：</span>
              <span class="content-main">
                <span class="calculate-type"> 
                  <span v-if="info.achievement.method==1">按班级设置</span>
                  <span v-if="info.achievement.method==2">按课程设置</span>
                  <span v-if="info.achievement.method==3">统一设置</span>
                 </span>
                <a class="alink" @click="jx_visible = true">更改</a>
              </span>
            </div>
            <div class="content-item">
              <span class="label">统计规则：</span>
              <span class="content-main">
                <span class="calculate-type"> 按合计值统计 
                  <span v-if="this.info.achievement.mode==1">，梯度计算(超额累计)</span>
                  <span v-if="this.info.achievement.mode==2">，梯度计算(全额累计)</span>
                </span>
                <a>
                  <a-tooltip :overlayStyle="{ 'max-width': '510px' }" color="#fff">
                    <template slot="title">
                      <div class="calculation-example">
                        <div class="title">计算示例</div>
                        <div class="desc">
                          王老师10月份上了
                          <span class="enhance"> 两次课 </span>
                          王老师10月份上了两次课，到课人次分别为5人和12人，则老师绩效工资方式为
                        </div>
                        <div class="rule">
                            <div class="item">
                              <div class="left">统计规则：</div>
                              <div class="right" v-if="info.achievement.mode==0">按合计值统计</div>
                              <div class="right" v-if="info.achievement.mode==1">按合计值统计，梯度计算(超额累计)</div>
                              <div class="right" v-if="info.achievement.mode==2">按合计值统计，梯度计算(全额累计)</div>
                            </div>
                            <div class="item">
                              <div class="left">计算方式：</div>
                              <div class="right" v-if="info.achievement.mode==0">
                                <div>按到课人次，20元/人次</div>
                              </div>
                              <div class="right" v-if="info.achievement.mode==1||info.achievement.mode==2">
                                <div>按到课人次</div>
                                <div>0＜到课人次≤10，20元/人次</div>
                                <div>10＜到课人次，30元/人次</div>
                              </div>
                            </div>
                            <div class="item">
                              <div class="left">绩效工资结算：</div>
                              <div class="right">
                                <div>合计总到课人次：5+12 = 17人次</div>
                                <div v-if="info.achievement.mode==0">绩效工资：17*20=340元</div>
                                <div v-if="info.achievement.mode==1">绩效工资：10*20+(17-10)*30=410元</div>
                                <div v-if="info.achievement.mode==2">绩效工资：17*30=510元</div>
                              </div>
                            </div>
                          </div>
                        <div class="bottom-tip">(以上计算方式为示例值，具体请参照员工工资详情中设置进行计算)</div>
                      </div>
                    </template>
                    查看计算示例
                  </a-tooltip>
                </a>
                <span style="color: rgb(191, 191, 191); margin: 0px 5px">|</span>
                <a @click="rule_visible = true">更改</a>
              </span>
            </div>
            <!-- 表格 -->
            <div></div>
          </div>
        </div>
        <div>
          <a-table
            :data-source="info.achievement.data"
            :columns="columns"
            :loading="tableLoading"
            :pagination="false"
            class="user_management_table"
            style="border: 1px solid #e8e8e8"
          >
            <span slot="className" slot-scope="text, record">
              <div v-if="info.achievement.method!=3">{{ record.name || '-' }}</div>
              <div v-else style="max-height:300px;overflow:auto">
                <div v-for="(item,index) in record.courseClss" style="margin-bottom:20px">
                   {{item.name}}
                </div>
              </div>
            </span>
            <span slot="courseName" slot-scope="text, record">
              <div>{{ record.name || '-' }}</div>
              <template v-if="record.classes && record.classes.length > 0">
                <div style="max-height: 410px; overflow: auto">
                  <div v-for="(item, index) in record.classes" :key="index" class="class__name">
                    {{ item.name }}
                  </div>
                </div>
              </template>
            </span>
            <span slot="gradient" slot-scope="text, record ,index">
              <template >
                <a-select
                    style="width: 150px;margin-bottom:10px"
                    placeholder="请选择梯度"
                    @change="forupdate(record, $event, index)"
                    v-model="record.gradient.type"
                  >
                    <a-select-option :value="1"> 按授课课时 </a-select-option>
                    <a-select-option :value="2"> 按到课人次 </a-select-option>
                    <a-select-option :value="3"> 按课消金额 </a-select-option>
                    <a-select-option :value="4"> 按学员课时 </a-select-option>
                  </a-select>
                  <div v-for="(item,num) in record.gradient.value" :key="num" class="class-hour">
                    <div v-if="num==0">0</div>
                    <a-input v-else style="width: 70px; margin-right: 8px" disabled :value='record.gradient.value[num-1]' placeholder="请输入"/>
                    <span style="padding-right:10px">
                        <span v-if="record.gradient.type == 1 || record.gradient.type == 4"><授课课时≤</span>
                        <span v-if="record.gradient.type == 2"><到课人次≤</span>
                        <span v-if="record.gradient.type == 3"><课消金额≤</span>
                    </span>
                    <a-input  :class="must_flag&&record.gradient.value[num]==''?'input-error':''"  placeholder="请输入" style="width:70px; margin-right: 8px" v-model="record.gradient.value[num]" />
                    <!-- <div v-else style="width:70px;"></div>
                    -->
                     <div >
                      <a-icon v-if="num>0" class="class-hour-icon" type="delete" @click="delClass(index,num,'gradient')" style="margin-right:8px"/>
                    </div>
                  </div>
                  <div  class="class-hour">
                    <div v-if="record.gradient.value.length==0">0</div>
                    <a-input  v-else  style="width: 70px; margin-right: 8px" disabled :value='record.gradient.value[record.gradient.value.length-1]' placeholder="请输入"/>
                    <span style="padding-right:10px">
                        <span v-if="record.gradient.type == 1 || record.gradient.type == 4"><授课课时</span>
                        <span v-if="record.gradient.type == 2"><到课人次</span>
                        <span v-if="record.gradient.type == 3"><课消金额</span>
                    </span>
                    <div style="width:88px;"></div>
                    <div>
                      <a-icon v-if="record.gradient.value.length>0" class="class-hour-icon" type="delete" @click="delClass(index,record.gradient.value.length-1,'gradient')" style="margin-right:8px"/>
                      <a-icon class="class-hour-icon" v-if="record.gradient.value.length<10" type="plus-circle" @click="addClass(index,'gradient')" />
                    </div>
                  </div>
              </template>
            </span>
            <span slot="computed" slot-scope="text, record, index">
              <!-- {{record}} -->
              <template v-if="info.achievement.mode==0">
                <div style="display: inline-block">
                  <a-select
                    style="width: 150px"
                    placeholder="请选择计算方式"
                    :disabled="info.achievement.mode==2"
                    v-model="record.compute_mode.type"
                  >
                    <a-select-option :value="0" v-if="info.achievement.mode!=1"> 未设置 </a-select-option>
                    <a-select-option :value="1"> 按授课课时 </a-select-option>
                    <a-select-option :value="2"> 按到课人次 </a-select-option>
                    <a-select-option :value="3"> 按课消金额 </a-select-option>
                    <a-select-option :value="4"> 按学员课时 </a-select-option>
                  </a-select>
                </div>
                <div style="margin-left: 50px; display: inline-block" v-show="record.compute_mode.type != 0&&record.compute_mode.type != undefined">
                  <div>
                    <a-input placeholder="请输入" style="width: 88px; margin-right: 8px" v-model="record.compute_mode.value[0]" />
                    <span v-if="record.compute_mode.type == 1 || record.compute_mode.type == 4">元/课时</span>
                    <span v-if="record.compute_mode.type == 2">元/人次</span>
                    <span v-if="record.compute_mode.type == 3">%课消比</span>
                  </div>
                </div>
              </template>

              <template v-else> 
                <a-select
                    style="width: 150px;margin-bottom:10px"
                    placeholder="请选择计算方式"
                    :disabled="info.achievement.mode==1"
                    v-model="record.compute_mode.type"
                  >
                    <a-select-option :value="1"> 按授课课时 </a-select-option>
                    <a-select-option :value="2"> 按到课人次 </a-select-option>
                    <a-select-option :value="3"> 按课消金额 </a-select-option>
                    <a-select-option :value="4"> 按学员课时 </a-select-option>
                  </a-select>
                  <div v-for="(item,num) in record.compute_mode.value" :key="num" class="class-hour">
                    <span v-if="record.compute_mode.type == 1">所有授课课时</span>
                    <span v-if="record.compute_mode.type == 2">所有到课人次</span>
                    <span v-if="record.compute_mode.type == 3">所有课消金额</span>
                    <span v-if="record.compute_mode.type == 4">所有学员课时</span>
                    <a-input  placeholder="请输入" style="width:70px; margin:0 10px" v-model="record.compute_mode.value[num]" />
                    <span v-if="record.compute_mode.type == 1 || record.compute_mode.type == 4">元/课时</span>
                    <span v-if="record.compute_mode.type == 2">元/人次</span>
                    <span v-if="record.compute_mode.type == 3">%课消比</span>
                  </div>
              </template>
              <!-- {{record}} -->
            </span>
          </a-table>
        </div>
      </template>
    </a-card>
    <div class="footer">
      <a-button style="margin-right: 8px" @click="$router.go(-1) ">取消</a-button>
      <a-button type="primary" style="color:#fff" @click="submit"> 确定 </a-button>
    </div>
    <!-- 绩效结算方式 -->
    <a-modal title="绩效结算方式"  v-if="is_enable != 2" :visible="jx_visible" @cancel="jx_visible = false" :footer="null" :width="560">
      <div class="content-box">
        <div
          class="card"
          :class="item.type == info.achievement.method ? 'active' : 'false'"
          v-for="(item, index) in jx_list"
          :key="index"
          @click="jx_seleted(item, index)"
        >
          <img src="~@/assets/img/wage/4.png" alt="" class="tag" v-if="item.type == info.achievement.method" />
          <img :src="item.img" alt="" />
          <div class="title">{{ item.title }}</div>
          <div class="description">{{ item.description }}</div>
        </div>
      </div>
    </a-modal>
    <!-- 绩效工资统计规则 -->
    <a-modal
      title="绩效工资统计规则"
      :visible="rule_visible"
      @ok="ruleHandleOk"
      @cancel="rule_visible = false;gradient_mode=info.achievement.mode"
      :width="890"
      :bodyStyle="{ 'max-height': '70vh', 'overflow-y': 'auto' }"
    >
      <div class="rule-box">
        <div class="left">统计规则：</div>
        <div class="right">
          <div
            class="item"
            :class="item.type == tj_rule_type ? 'active' : 'false'"
            v-for="(item, index) in tj_rule_list"
            :key="index"
            @click="ruleChoice(item)"
          >
            <div class="title">{{ item.title }}</div>
            <div class="subtitle">{{ item.des }}</div>
          </div>
        </div>
      </div>
      <div class="rule-box">
        <div class="left">梯度计算：</div>
        <div class="right">
          <div
            class="item"
            :class="item.type == gradient_mode ? 'active' : 'false'"
            v-for="(item, index) in td_count_list"
            :key="index"
            @click="ruleCountChoice(item)"
          >
            <div class="title">{{ item.title }}</div>
            <div class="subtitle">{{ item.des }}</div>
          </div>
        </div>
      </div>
      <div class="calculation-example" style="background: rgba(243, 246, 250, 0.4); padding: 12px">
        <div class="title">计算示例</div>
        <div class="desc">
          王老师10月份上了
          <span class="enhance"> 两次课 </span>
          王老师10月份上了两次课，到课人次分别为5人和12人，则老师绩效工资方式为
        </div>
        <div class="rule">
          <div class="item">
            <div class="left">统计规则：</div>
            <div class="right" v-if="gradient_mode==0">按合计值统计</div>
            <div class="right" v-if="gradient_mode==1">按合计值统计，梯度计算(超额累计)</div>
            <div class="right" v-if="gradient_mode==2">按合计值统计，梯度计算(全额累计)</div>
          </div>
          <div class="item">
            <div class="left">计算方式：</div>
            <div class="right" v-if="gradient_mode==0">
              <div>按到课人次，20元/人次</div>
            </div>
            <div class="right" v-if="gradient_mode==1||gradient_mode==2">
              <div>按到课人次</div>
              <div>0＜到课人次≤10，20元/人次</div>
              <div>10＜到课人次，30元/人次</div>
            </div>
          </div>
          <div class="item">
            <div class="left">绩效工资结算：</div>
            <div class="right">
              <div>合计总到课人次：5+12 = 17人次</div>
              <div v-if="gradient_mode==0">绩效工资：17*20=340元</div>
              <div v-if="gradient_mode==1">绩效工资：10*20+(17-10)*30=410元</div>
              <div v-if="gradient_mode==2">绩效工资：17*30=510元</div>
            </div>
          </div>
        </div>
        <div class="bottom-tip">(以上计算方式为示例值，具体请参照员工工资详情中设置进行计算)</div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { salariesInfo, payslipItems, teacherCourse,setSalaries } from '@/api/wageSettlement'
// import { delete } from 'node_modules/vue/types/umd'
export default {
  components: {
    topNavBar,
  },
  data() {
    return {
      tableLoading:false,
      must_flag:false,

      rule_visible: false,
      jx_visible: false,
      nowRouteTitle: '',
      id: undefined,
      teacher_id: undefined,
      is_enable:1,


      gradient_mode:0,//	梯度计算方式
      info: {
        base_pay:'', //基本工资
        bonus:'', //奖金
        payslip_item_arr:[],//其他金额
        achievement:{
          method:1,  //	结算方式:1按班级设置， 2按课程设置， 3同一设置
          gradient_wage:true, //是否使用梯度工资
          mode:0,  //	梯度计算方式：0无梯度 1超额累计，2全额累计
          data:[
          ],
        }
      },
      school_id: this.$store.state.user.school,
      courrent: 0,
      jx_type: 1,
      jx_list: [
        {
          img: require('@/assets/img/wage/1.png'),
          type: 1,
          title: '按班级设置',
          description: '为该老师授课的每一个班级分别设置绩效工资',
        },
        {
          img: require('@/assets/img/wage/2.png'),
          type: 2,
          title: '按课程设置',
          description: '为该老师授课的每一个课程分别设置绩效工资',
        },
        {
          img: require('@/assets/img/wage/3.png'),
          type: 3,
          title: '统一设置',
          description: '为该老师授课的所有班级设置统一绩效工资',
        },
      ],
      tj_rule_type: 1,
      tj_rule_list: [
        {
          type: 1,
          title: '按合计值统计',
          des: '将上课时间在结算时间范围内所有点名记录数据先统计合计值，再按公式进行计算',
        },
        // {
        //   type: 2,
        //   title: '按每个课次单独统计',
        //   des: '将上课时间在结算时间范围内所有点名记录数据先进行公式计算，再进行合计',
        // },
      ],
      td_count_type: -1,
      td_count_list: [
        {
          type: 0,
          title: '无梯度',
          des: '',
        },
        {
          type: 1,
          title: '超额累计',
          des: '按照各梯度的单价设置计算后累加',
        },
        {
          type: 2,
          title: '全额累计',
          des: '按照所属梯度的单价设置统一计算',
        },
      ],
      data: [
        {
          name: '--',
        },
      ],
      columns: [
     /*    {
          title: '授课班级',
          width: '50%',
          scopedSlots: { customRender: 'className' },
        },
        {
          title: '计算方式',
          width: '50%',
          scopedSlots: { customRender: 'computed' },
        }, */
      ],
      courseClss:[],
      course:[],
      achievement_data:[],
      type:'add',
      save_method:'',
      save_mode:'',
    }
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    this.id = this.$route.query.id
    this.teacher_id = this.$route.query.teacher_id
    this.is_enable = this.$route.query.is_enable
    this.getCourse(2)
    this.getCourse(1)
    this.getInfo(this.id)
    this.getPayslipList()
  },
  methods: {  
    //获取详情
    getInfo(id) {
      salariesInfo(id)
        .then((res) => {
          this.info.name=res.name
          this.info.base_pay = res.base_pay
          this.info.bonus = res.bonus
          //赋值achievement
          if(res.achievement){
            this.type='edit'
            this.info.achievement = JSON.parse(JSON.stringify(res.achievement))
            this.gradient_mode=res.achievement.mode
            this.achievement_data=JSON.parse(JSON.stringify(res.achievement))
            this.save_method=res.achievement.method
            this.save_mode=res.achievement.mode
          }
          if(this.info.achievement.method!=2){
            this.getCourse(2)
          }else{
            this.getCourse(1)
          }
          this.info.payslip_item_arr = []
          res.other.forEach(val=>{
            if(val.payslip_item.type==2){
              this.info.payslip_item_arr.push({name:val.payslip_item.name,id:val.payslip_item.id,value:Math.abs(val.value),type:val.payslip_item.type})
            }else{
              this.info.payslip_item_arr.push({name:val.payslip_item.name,id:val.payslip_item.id,value:val.value,type:val.payslip_item.type})
            }
          })
          this.$forceUpdate()
          console.log(res,'初始信息')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    //查询工资条项目
    getPayslipList() {
      payslipItems({ school_id: this.school_id, pageSize: 999 })
    },
    //获取课程 班级
    getCourse(type=undefined) {
      //1课程，2班级
      this.tableLoading=true
      teacherCourse({ teacher_id: this.teacher_id, type })
        .then((res) => {
          this.tableLoading=false
          if(type==2){
           this.courseClss=JSON.parse(JSON.stringify(res))
          }else{
           this.course=JSON.parse(JSON.stringify(res))
          }
          if(this.type=='edit'){
            this.tableEditChange()
          }else{
            this.tableChange()
          }
          console.log(this.course, 'data')
        })
        .catch((err) => {this.tableLoading=false})
    },
    //校级结算方式确认
    jx_seleted(item, index) {
      // this.courrent = index
      this.info.achievement.method = item.type
      /* if(this.info.achievement.method!=2){
        this.getCourse(2)
      }else{
        this.getCourse(1)
      } */
      this.jx_visible = false
      if((this.save_method==this.info.achievement.method)&&(this.save_mode==this.info.achievement.mode)){
        this.tableEditChange()
      }else{
        this.tableChange()
      }
    },
    ruleChoice(item) {
      this.tj_rule_type = item.type
    },
    //删除
    delClass(index,num,name){
      this.info.achievement.data[index].gradient.value.splice(num,1)
      this.info.achievement.data[index].compute_mode.value.splice(num,1)
      console.log(this.info.achievement.data[index])
      // item.gradient.value.splice(index,1)
      this.$forceUpdate()
    },
    //添加
    addClass(index,name){
      this.info.achievement.data[index].gradient.value.push('')
      this.info.achievement.data[index].compute_mode.value.push('')
       this.$forceUpdate()
    },
    forupdate(item, e, index) {
      if(this.info.achievement.mode==1){
        this.info.achievement.data[index].compute_mode.type=this.info.achievement.data[index].gradient.type
      }
    },
    //梯度弹框确认
    ruleHandleOk(e) {
      this.info.achievement.mode=this.gradient_mode
      this.rule_visible = false
      if(this.save_method==this.info.achievement.method&&this.save_mode==this.info.achievement.mode){
        this.tableEditChange()
      }else{
        this.tableChange()
      }
    },
    //点击梯度
    ruleCountChoice(item) {
      this.gradient_mode = item.type
    },
    //编辑更改表格
    tableEditChange(){
      this.info.achievement =JSON.parse(JSON.stringify(this.achievement_data))
      console.log(this.info.achievement,9999999)
      if (this.info.achievement.method  == 1) {
        if(this.info.achievement.mode==0){
          this.columns = [
              {
                title: '授课班级',
                width: '50%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '计算方式',
                width: '50%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }else{
          this.columns = [
              {
                title: '授课班级',
                width: '30%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '梯度',
                width: '36%',
                scopedSlots: { customRender: 'gradient' },
              },
              {
                title: '计算方式',
                width: '33%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }
      }
      if (this.info.achievement.method  == 2) {
         if(this.info.achievement.mode==0){
          this.columns = [
              {
            title: '授课课程',
            width: '50%',
            scopedSlots: { customRender: 'courseName' },
          },
              {
                title: '计算方式',
                width: '50%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }else{
          this.columns = [
              {
                title: '授课课程',
                width: '30%',
                scopedSlots: { customRender: 'courseName' },
              },
              {
                title: '梯度',
                width: '36%',
                scopedSlots: { customRender: 'gradient' },
              },
              {
                title: '计算方式',
                width: '33%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }
        
      }
      if (this.info.achievement.method  == 3) {
        if(this.info.achievement.mode==0){
          this.columns = [
              {
                title: '授课班级',
                width: '50%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '计算方式',
                width: '50%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }else{
          this.columns = [
              {
                title: '授课班级',
                width: '30%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '梯度',
                width: '36%',
                scopedSlots: { customRender: 'gradient' },
              },
              {
                title: '计算方式',
                width: '33%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }
        
      }
      this.$forceUpdate()
    },
    //更改表格
    tableChange(){
       this.info.achievement.data=[]
       if (this.info.achievement.method  == 1) {
        this.courseClss.forEach((item) => {
                if(this.info.achievement.mode==0){
                  this.info.achievement.data.push(
                    {
                      id:item.id,
                      classes:item.classes||[],
                      name:item.name,
                      compute_mode:{
                        type:undefined,
                        value:[],
                      }
                    }
                  )
                }else{
                  this.info.achievement.data.push(
                    {
                      id:item.id,
                      classes:item.classes||[],
                      name:item.name,
                      gradient:{
                        type:1,
                        value:[''],
                      },
                      compute_mode:{
                        type:1,
                        value:['',''],
                      }
                    }
                  )
                }
        })
        if(this.info.achievement.mode==0){
          this.columns = [
              {
                title: '授课班级',
                width: '50%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '计算方式',
                width: '50%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }else{
          this.columns = [
              {
                title: '授课班级',
                width: '30%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '梯度',
                width: '36%',
                scopedSlots: { customRender: 'gradient' },
              },
              {
                title: '计算方式',
                width: '33%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }
      }
      if(this.info.achievement.method  == 3){
           if(this.info.achievement.mode==0){
                  this.info.achievement.data.push(
                    {
                      courseClss:this.courseClss,
                      compute_mode:{
                        type:undefined,
                        value:[],
                      }
                    }
                  )
            }else{
              this.info.achievement.data.push(
                {
                  courseClss:this.courseClss,
                  gradient:{
                    type:1,
                    value:[''],
                  },
                  compute_mode:{
                    type:1,
                    value:['',''],
                  }
                }
              )
            }
        if(this.info.achievement.mode==0){
          this.columns = [
              {
                title: '授课班级',
                width: '50%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '计算方式',
                width: '50%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }else{
          this.columns = [
              {
                title: '授课班级',
                width: '30%',
                scopedSlots: { customRender: 'className' },
              },
              {
                title: '梯度',
                width: '36%',
                scopedSlots: { customRender: 'gradient' },
              },
              {
                title: '计算方式',
                width: '33%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }
      }
      if (this.info.achievement.method  == 2) {
        this.course.forEach((item) => {
                if(this.info.achievement.mode==0){
                  this.info.achievement.data.push(
                    {
                      id:item.id,
                      classes:item.classes||[],
                      name:item.name,
                      compute_mode:{
                        type:undefined,
                        value:[],
                      }
                    }
                  )
                }else{
                  this.info.achievement.data.push(
                    {
                      id:item.id,
                      classes:item.classes||[],
                      name:item.name,
                      gradient:{
                        type:1,
                        value:[''],
                      },
                      compute_mode:{
                        type:1,
                        value:['',''],
                      }
                    }
                  )
                }
        })
        if(this.info.achievement.mode==0){
          this.columns = [
              {
            title: '授课课程',
            width: '50%',
            scopedSlots: { customRender: 'courseName' },
          },
              {
                title: '计算方式',
                width: '50%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }else{
          this.columns = [
              {
                title: '授课课程',
                width: '30%',
                scopedSlots: { customRender: 'courseName' },
              },
              {
                title: '梯度',
                width: '36%',
                scopedSlots: { customRender: 'gradient' },
              },
              {
                title: '计算方式',
                width: '33%',
                scopedSlots: { customRender: 'computed' },
              },
            ]
        }
      }
      this.$forceUpdate()
    },
    // 提交
    submit() {
      let _this=this
      this.must_flag=false
      if(this.is_enable!=2){
        if(this.info.achievement.mode==0){
          this.info.achievement.gradient_wage=false
        }else{
          this.info.achievement.gradient_wage=true
        }
      
        if(this.info.achievement.mode!=0){
          let x=0
          this.info.achievement.data.forEach((val,index)=>{
            val.gradient.value.forEach(item=>{
              if(item==''){x++}
            })
          })
          if(x>0){
            this.must_flag=true
            this.$message.warning('梯度数值从小到大输入，不可为空')
            return
          }
        }
      }
      else{
        delete _this.info.achievement
      }

      let data=this.Utils.deep(_this.info)
      
      data.payslip_item_arr.forEach((val,index)=>{
        if(val.type==2){
          val.value=(-Math.abs(val.value))
          // _this.$set(data.payslip_item_arr[index],'value',(-Math.abs(val.value)))
        }
      })
      _this.$confirm({
        title: '确认保存',
        content: '确认后立即生效，不影响已结算的工资。',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          setSalaries(_this.id,data).then((res) => {
              if(res==''){
                   _this.$message.success('设置个人工资成功') 
                   _this.$router.go(-1) 
              }
            })
            .catch(err => {
              _this.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {}
      })
      
    },
    back() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss">
.fu-box{
  .fu-icon{
    margin-right:-15px;
    margin-top:-2px;
    position:relative;
    z-index:2;
  }
  .ant-input{
    padding-left:20px
  }

}

</style>
<style lang="less" scoped>
@import '~@/components/index.less';

.class-hour{
  display: flex !important;;
  align-items: center !important;;
  margin-top: 10px;
  div{
    width:77px;
  }
  .class-hour-icon{
    cursor: pointer;
  }
  .class-hour-icon:hover{
    color: @primary-color;
  }
}
.input-error{
  border-color: #f5222d !important;
}
.name-bar {
  padding-bottom: 15px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
  .name-content {
    color: #333;
    font-size: 18px;
    font-weight: 500;
    margin-right: 20px;
  }
}
.set-fixed-salary {
  .title {
    margin-bottom: 10px;
  }
  .set-item-btn {
    color: #999;
    margin-bottom: 11px;
    cursor: pointer;
  }
  .salary-list {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 168px;
      margin-right: 18px;
      margin-bottom: 10px;
      border: 1px solid #e8e8e8;
      // display: inline-block;
      .title {
        background-color: #f7f8f9;
        padding: 10px 24px;
        color: #333;
        margin-bottom: 10px;
      }
      .num {
        padding: 10px 24px 16px;
      }
    }
  }
}
.performance-pay-setting {
  margin-top: 6px;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .content {
    margin-top: 12px;
    .content-item {
      margin-bottom: 16px;
      .content-main {
        .calculate-type {
          margin-right: 16px;
        }
      }
    }
  }
}
.content-box {
  display: flex;
  .active {
    border-color: #fc9c6b !important;
  }
  .card {
    position: relative;
    width: 160px;
    height: 200px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 20px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:not(:last-child) {
      margin-right: 15px;
    }
    .tag {
      position: absolute;
      top: 0;
      left: 0;
      width: 35px !important;
    }
    img {
      width: 80px;
    }
    .title {
      margin-top: 20px;
      color: #333;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
    }
    .description {
      margin-top: 10px;
      color: #999;
      font-size: 14px;
    }
  }
}
.calculation-example {
  // background: #fff;
  // color:#fff !important;
  // color: #333;
  .title {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    // color: #333;
    line-height: 20px;
  }
  .desc {
    line-height: 24px;
    // .enhance {
    //   position: relative;
    //   &:after {
    //     position: absolute;
    //     bottom: 3px;
    //     display: block;
    //     content: '';
    //     background: #ff8534;
    //     opacity: 0.3;
    //     width: 100%;
    //     height: 6px;
    //   }
    // }
  }
  .rule {
    .item {
      display: flex;
      .left {
        color: #999;
      }
    }
  }
  .bottom-tip {
    color: #999;
  }
}
.rule-box {
  display: flex;
  margin-bottom: 16px;
  .left {
    color: #666;
  }
  .right {
    display: flex;
    .active {
      background: hsla(20, 96%, 70%, 0.05);
      border: 1px solid #096dd9 !important;
    }
    .item {
      width: 242px;
      height: 74px;
      border-radius: 4px;
      padding: 8px 12px 8px 10px;
      border: 1px solid #e8e8e8;
      cursor: pointer;
      margin-right: 16px;
      &:last-child {
        margin-right: 0;
      }
      .title {
        font-family: PingFangSC-Medium, PingFang SC;
        color: #333;
      }
      .subtitle {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.class__name {
  display: inline-block;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: left !important;
  &::before {
    content: ' ';
    display: inline-block;
    margin-right: 8px;
    width: 0;
    height: 0;
    border: 3px solid #bfbfbf;
    border-radius: 100%;
    transform: translateY(-25%);
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  z-index: 10;
  padding-right: 75px;
}
</style>